<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="author" content="Juan Manuel Caicedo" />
<meta name="copyright" content="Juan Manuel Caicedo" />


<link rel="shortcut icon" href="http://www.cavorite.com/lib/imgs/favicon.gif" />

<link rel="stylesheet" href="http://www.cavorite.com/lib/six/css/cavorite.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.cavorite.com/lib/six/css/encabezados.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.cavorite.com/lib/six/css/azul.css" type="text/css" media="screen" />

<link rel="stylesheet" href="http://www.cavorite.com/lib/six/css/secciones.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.cavorite.com/lib/six/css/dinamico.php" type="text/css" media="screen" />


<!--
<rdf:RDF xmlns="http://web.resource.org/cc/"
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="http://www.cavorite.com/blog">
<dc:title>cavorite</dc:title>
<dc:description></dc:description>
<license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/1.0/" />
</Work>
<License rdf:about="http://creativecommons.org/licenses/by-nc-sa/1.0/">
<requires rdf:resource="http://web.resource.org/cc/Attribution" />
<requires rdf:resource="http://web.resource.org/cc/Notice" />
<requires rdf:resource="http://web.resource.org/cc/ShareAlike" />
<permits rdf:resource="http://web.resource.org/cc/Reproduction" />
<permits rdf:resource="http://web.resource.org/cc/Distribution" />
<permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
<prohibits rdf:resource="http://web.resource.org/cc/CommercialUse" />
</License>
</rdf:RDF>
-->



<title>Zebda
</title>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">

</script>

<script type="text/javascript">
_uacct = "UA-86795-1";
urchinTracker();
</script>

</head>

<body>
<div id="pagina" class="article">
<div id="encabezado" class="blog">
<div id="logo">
<h1><a href="http://www.cavorite.com/" title="cavorite.com">cavorite.com</a></h1>
</div>

</div>


<div id="navegacion">
<p class="accesible">
<a tabindex="2" href="#contenido" accesskey="2" title="">Ir al contenido</a>
</p>
<div id="menu_principal">

<ul>
<li><a href="/blog/" title="weblog, diario, etc" >Blog</a></li>
<li><a class="activo"  href="http://labs.cavorite.com" title="Projects" >Labs</a></li>
<li><a href="/info/stauts" title="status page" >status</a></li>
<!--
<li><a href="/720/" title="siete veinte | exposici&oacute;n" >7 20</a></li>
<li><a href="/fotos/" title="Fotos" >Fotos</a></li>
<li><a href="/info/" title="Acerca de cavorite.com" >about</a></li>
-->
</ul>
</div>

<div id="menu_seccion">
<h3>Demo</h3>
<ul>
  <li><a href="demo/">Form validation demo</a></li>
  <li><a href="examples/formValidator">Form validation with conditional rules</a></li>
</ul>

<h3>Downloads</h3>
<ul>
  <li><a href="zebda.js">zebda.js</a></li>
</ul>

<h3>See also</h3>
<ul>
  <li><a href="http://prototype.conio.net/">prototype javascript framework</a></li>
</ul>

</div>

</div>


<div id="contenido">
<div id="cuerpo">

<h2>Zebda</h2>

<p>Zebda is a general purpose javascript library built on <a href="http://prototype.conio.net/">Prototype 1.4.0</a>.</p>

<p>Although it has some utility functions, the main purpose is handling client-side form validation.</p>


<h3>News</h3>

<h4>Version 0.3 released (2006-07-27)</h4>
<p>Bugfixes and conditional validation. See the <a href="examples/formValidator">examples</a></p>

<h3>What does it do?</h3>

<ul>
<li>Handles client-side form validation in an easy but powerfull way.</li>
<li>The validation rules  and error messages are expressed using custom <span class="caps">HTML</span> attributes.</li>
<li>There&#8217;s no need to add javascript statements (onLoad, onSubmit).</li>

<li>It&#8217;s extensible: New validation rules can be easly added.</li>
<li>Provides clean separation of structure, presentation and behaviour.</li>
</ul>

<h3>How does it work?</h3>

<p>The validation rules  and error messages are expressed using custom <span class="caps">HTML</span> attributes.</p>

<pre>

<code>
&lt;form method="POST" action="/login"&gt;
&lt;input type="text" name="name" id="name"
z:required="true" z:message="Please write your name" /&gt;
&lt;input type="submit" /&gt;
&lt;/form&gt;
</code>
</pre>

<p>It&#8217;s possible to add multiple rules and an error message for each one:</p>

<pre>

<code>
&lt;input id="email" name="email" type="text"
z:required="true" z:required_message="Please write your email"
z:email="true"
z:email_message="Write your email in standard format" /&gt;
</code>
</pre>

<p>In the example above, the message <code>z:required_message</code> it&#8217;s used when the <code>z:required</code> rule fails. In general, when a rule is declared the atributte <code>z:rulename_message</code> is used for the message, if it doesn&#8217;t exist the attribute <code>z:message</code> is picked.</p>

<h3>Validation rules</h3>

<table>
<tr>
<td>Attribute</td>
<td>Description</td>
<td>Additional arguments</td>
</tr>
<tr>
<td><code>z:required</code></td>
<td>The field must have a value. It can be a text box, text area, or a select list</td>

<td><em>None</em></td>
</tr>
<tr>
<td><code>z:length</code></td>
<td>Checks for maximum or minimun length of the text</td>
<td>min: Minimun length. max:Maximum. One of both is required</td>
</tr>
<tr>
<td><code>z:numeric</code></td>
<td>Checks for a numeric format</td>
<td>isFloat:true,false. Optional. Default: <em>false</em></td>

</tr>
<tr>
<td><code>z:email</code></td>
<td>Checks for an email format</td>
<td><em>None</em></td>
</tr>
<tr>
<td><code>z:regexp</code></td>
<td>Uses a regular expression as the condition</td>
<td>exp: Regular expression (eg: <code>/[A-Z]{5}/</code>)</td>

</tr>
</table>

<p>The arguments are defined using <a href="http://www.json.org/"><span class="caps">JSON</span></a> syntax:</p>

<pre>
<code>
z:length="{max: 10, min: 5}"
z:regexp="{exp: /[A-Z]{5}/}"
</code>
</pre>

<h3>Filters</h3>

<p>It&#8217;s also possible to preprocess text fields and transform their values before validation.</p>

<pre>
<code>
&lt;input id="login" name="login" class="text" type="text"
z:required="true" z:required_message="Please write your username"
z:filter_trim="true" z:filter_lowercase="true" z:length="{max: 10}"
z:length_message="The username must have less than 10 characters" /&gt;
</code>
</pre>

<p>Here, the filters <code>z:filter_trim</code>, <code>z:filter_lowercase</code> are applied to value of the field before validation.</p>

<table>
<tr>
<td>Filter</td>
<td>Description</td>
</tr>
<tr>
<td><code>z:filter_trim</code></td>
<td>Removes spaces at the begin and the end of the string.</td>
</tr>
<tr>
<td><code>z:filter_trimleft</code></td>

<td>Removes spaces at the begin of the string</td>
</tr>
<tr>
<td><code>z:filter_trimright</code></td>
<td>Removes spaces at the end of the string</td>
</tr>
<tr>
<td><code>z:filter_singlespace</code></td>
<td>Removes double spaces</td>
</tr>
<tr>
<td><code>z:filter_lowercase</code></td>

<td>Converts the string to lowercase</td>
</tr>
<tr>
<td><code>z:filter_uppercase</code></td>
<td>Converts the string to uppercase</td>
</tr>
<tr>
<td><code>z:filter_numbers</code></td>
<td>Removes non-numeric characters</td>
</tr>
</table>

<h3>Demo</h3>

<p>The  <a href="http://labs.cavorite.com/zebda/demo/">demo</a> is based on form usability examples by  <a href="http://www.themaninblue.com/writing/perspective/2005/10/05/"><br />
Cameron Adams (The man in blue)</a>.</p>

<h3>Installation</h3>

<p>Include the files <em>zebda.js</em> and <em>prototype-1.4.0.js</em> via a script tag at the top of the page.</p>

<pre>
<code>
&lt;script type="text/javascript" src="prototype-1.4.0.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="zebda.js"&gt;&lt;/script&gt;
</code>
</pre>

<h3>Support</h3>

<p>Visit the <a href="http://groups.google.com/group/zebda">Zebda Google Group</a> for support and development discussion.</p>

<h3>Download</h3>

<p><a href="zebda.js">zebda.js</a> version 0.2</p>

<h3>License</h3>


<!-- Creative Commons License -->
<p><a href="http://creativecommons.org/licenses/LGPL/2.1/">
<img alt="CC-GNU LGPL" border="0" src="http://creativecommons.org/images
/public/cc-LGPL-a.png" /></a><br />
This software is licensed under the <a href="http://creativecommons.org/licenses/LGPL/2.1/">CC-GNU LGPL</a>.</p>

<!-- /Creative Commons License -->


<!--

<rdf:RDF xmlns="http://web.resource.org/cc/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
   <license rdf:resource="http://creativecommons.org/licenses/LGPL/2.1/" />
   <dc:type rdf:resource="http://purl.org/dc/dcmitype/Software" />
</Work>

<License rdf:about="http://creativecommons.org/licenses/LGPL/2.1/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction" />
   <permits rdf:resource="http://web.resource.org/cc/Distribution" />
   <requires rdf:resource="http://web.resource.org/cc/Notice" />
   <permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
   <requires rdf:resource="http://web.resource.org/cc/ShareAlike" />
   <requires rdf:resource="http://web.resource.org/cc/SourceCode" />
</License>

</rdf:RDF>

-->



<h3>Acknowledgements</h3>
<dl>
<dt><a href="http://prototype.conio.net">Sam Stephenson</a></dt>
<dd>Prototype, an excelent JavaScript framework (now with iterators!)</dd>
<dt>Sergio Pereira</dt>
<dd><a href="http://www.sergiopereira.com/articles/prototype.js.html">prototype documentation</a></dd>

<dt><a href="http://www.quirksmode.org">Peter-Paul Koch</a></dt>
<dd>Quirksmode</dd>
<dt><a href="http://www.themaninblue.com">Cameron Adams</a></dt>
<dd><a href="http://www.themaninblue.com/writing/perspective/2005/10/05/">Form Usability examples</a></dd>
</dl>

<h3>About the name <em>Zebda</em></h3>

<p>The name Zebda was chosen after the <a href="http://en.wikipedia.org/wiki/Zebda">french music group</a>.</p>

<h3>About custom <span class="caps">HTML</span> attributes</h3>

<p>Declaring custom <span class="caps">HTML</span> attributes is a well known technique, and also controversial, that has been dicussed before;
<a href="http://www.quirksmode.org/">Peter-Paul Koch</a> explains its benefits and problems in the article <a href="http://www.alistapart.com/articles/scripttriggers/">JavaScript Triggers</a>.</p>

<p>In Zebda, the namespace prefix <em>z</em> has been chosen but there&#8217;s no need to declare it. A schema has not been created nor a <span class="caps">DTD</span> wich defines the custom attributes.</p>

</div>

<div id="imagenes">

</div>

</div>

<p style="clear: both">&nbsp;</p>
<div id="externals">
<ul>
<li class="primero"><a href="http://bachue.com"><acronym xml:lang="es" title="The Open List">TOL</acronym> - La lista de weblogs</a></li>
<li><a href="http://del.icio.us/cavorito">del.icio.us</a></li>
<li><a href="http://flickr.com/photos/cavorite/">flickr</a></li>
<li><a href="http://kinja.com/user/cavorite">kinja</a></li>
<li><a href="http://www.last.fm/user/cavorite">last.fm</a></li>

<!--
<li><a href="http://www.bloglines.com/public/cavorite">bloglines</a></li>
-->
</ul>
</div>

<p style="clear: both">&nbsp;</p>
<div id="pie">

<div class="contenido">
<p><a href="http://www.cavorite.com">Juan Manuel Caicedo</a></p>
<!--
<p>Bajo la licencia <a href="http://creativecommons.org/licenses/by-nc-sa/1.0" title="Licencia Creative Commons - Attribution-NonCommercial-ShareAlike ">Creative Commons License</a></p>
-->
<div><span>RSS</span>
<ul class="feeds">
<li class="primero"><a href="http://www.cavorite.com/blog/index.xml">Blog</a></li>

<li><a href="http://del.icio.us/rss/cavorito">Enlaces</a></li>
</ul>
</div>
<div>
<span>Funciona con / powered by </span>
<ul class="powered">

<li class="primero"><a href="http://www.movabletype.org" title="Funciona con / powered by Movable Type">Movable Type 3.2</a></li>

<li><a href="http://validator.w3.org/check/referer" title="Servicio de validaci&#65533; de XHTML ">
<acronym xml:lang="en" title="Extensible HyperText Markup Language">XHTML</acronym></a></li>
<!--
<li><a href="http://www.php.net"><acronym xml:lang="en" title="PHP: Hypertext Preprocessor">php</acronym></a> </li><li><a href="http://www.mysql.com">mysql</a></li>
-->
</ul>

</div>
</div>
</div>

</div>
</body>
</html>